<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>写作分析</title>
     <script src="data.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="data-analysis.css">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="guide.css">
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#6B7280',
      },
      borderRadius: {
        'none': '0px',
        'sm': '2px',
        DEFAULT: '4px',
        'md': '8px', 
        'lg': '12px',
        'xl': '16px',
        '2xl': '20px',
        '3xl': '24px',
        'full': '9999px',
        'button': '4px'
      }
    }
  }
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
.fas {
  width: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body class="min-h-screen bg-gray-50">
<div class="border-b bg-white">
  <header>
    <div class="logo">阅视界</div>
    <ul class="nav-menu">
        <li><a href="index.html">首页</a></li>
        <li><a href="scoring-page.html">即时评分</a></li>
        <li><a href="history-review.html">评分历史</a></li>
        <li><a href="data-analysis.html" class="active">数据分析</a></li>
        <li><a href="feedback.html">反馈中心</a></li>
        <li><a href="guide.html">使用指南</a></li>
    </ul>
    <div class="user-actions">
        <div class="user-info" style="display: none;">
            <span id="username-display" style="cursor: pointer;"></span>
        </div>
        <div class="auth-buttons">
            <button class="primary" onclick="window.location.href='auth.html#login'">登录</button>
            <button onclick="window.location.href='auth.html#register'">注册</button>
        </div>
    </div>
</header>
</div>
<div class="max-w-7xl mx-auto px-4 py-8">
  <div class="grid grid-cols-3 gap-6 mb-8">
<!--    <div class="bg-white rounded-lg p-6 shadow-sm" >-->
<!--      <div class="text-gray-600 mb-2" id="score-card-trigger">总体得分</div>-->
<!--      <div class="text-3xl font-bold text-primary">92分</div>-->
<!--      <div class="text-sm text-green-500 mt-2">-->
<!--        <i class="fas fa-arrow-up"></i> 较上次提升 3 分-->
<!--      </div>-->
<!--    </div>-->

    <!-- 修改1：给点击区域添加专用class和cursor-pointer样式 -->
    <div class="bg-white rounded-lg p-6 shadow-sm cursor-pointer score-card-trigger"
     title="点击查看详细对比分析报告"
     data-current-score="92"
     data-previous-score="89"
     data-diff="3">
      <div class="text-3xl font-bold text-primary" id="current-score">92分</div>
  <div class="text-sm mt-2" id="score-diff">
    <i class="fas fa-arrow-up text-green-500"></i>
    <span class="text-green-500">较上次提升 3 分</span>
  </div>
    </div>

<div class="bg-white rounded-lg p-6 shadow-sm" id="ranking-card">
  <div class="text-gray-600 mb-2">历史排名</div>
  <div class="text-3xl font-bold text-purple-600" id="ranking-percent">
    <span class="loading-dots">加载中</span>
  </div>
  <div class="text-sm text-gray-500 mt-2" id="ranking-description">
    正在计算排名数据...
  </div>
</div>
<div class="dashboard-card cursor-pointer group bg-white rounded-lg p-6 shadow-sm"
     onclick="window.location.href='history-review.html'"
     id="essay-count-card">
    <div class="text-gray-600 mb-2">累计作文数</div>
    <div class="text-3xl font-bold text-primary" id="total-count">加载中...</div>
    <div class="text-sm text-gray-500 mt-2" id="monthly-count">本月已完成 加载中...</div>
    <div class="absolute top-4 right-4 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">-->
        <i class="fas fa-arrow-right">查看评分历史</i>
    </div>
</div>
<!--<div class="dashboard-card cursor-pointer group bg-white rounded-lg p-6 shadow-sm" onclick="window.location.href='history-review.html'">-->
<!--    <div class="text-gray-600 mb-2">累计作文数</div>-->
<!--    <div class="text-3xl font-bold text-primary">28 篇</div>-->
<!--    <div class="text-sm text-gray-500 mt-2">本月已完成 6 篇</div>-->
<!--    &lt;!&ndash; 添加一个小箭头图标，保持简洁 &ndash;&gt;-->
<!--    <div class="absolute top-4 right-4 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity">-->
<!--        <i class="fas fa-arrow-right">查看评分历史</i>-->
<!--    </div>-->

        <!-- 用户详情模态窗口 -->

    </div>
<!--    <div class="bg-white rounded-lg p-6 shadow-sm">-->
<!--      <div class="text-gray-600 mb-2">累计作文数</div>-->
<!--      <div class="text-3xl font-bold text-orange-600">28 篇</div>-->
<!--      <div class="text-sm text-gray-500 mt-2">本月已完成 6 篇</div>-->
<!--    </div>-->
  </div>
<div class="mt-6 p-6 bg-gray-100 border border-gray-300 rounded-lg shadow-lg">
  <div class="grid grid-cols-2 gap-6 mb-8">
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-medium mb-4">分数趋势</h3>
      <div id="scoreChart" class="w-full h-80"></div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-medium mb-4">能力维度分析</h3>
      <div id="radarChart" class="w-full h-80"></div>
    </div>
  </div>

  <div class="grid grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-medium mb-4">词汇分析</h3>
      <div id="vocabularyChart" class="w-full h-64"></div>
      <div class="mt-4 space-y-2">
        <div class="flex justify-between text-sm">
          <span>高级词汇使用率</span>
          <span class="text-primary">23%</span>
        </div>
        <div class="flex justify-between text-sm">
          <span>词汇丰富度</span>
          <span class="text-primary">0.76</span>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-medium mb-4">句式分析</h3>
      <div id="sentenceChart" class="w-full h-64"></div>
      <div class="mt-4 space-y-2">
        <div class="flex justify-between text-sm">
          <span>平均句长</span>
          <span class="text-primary">18.5 字</span>
        </div>
        <div class="flex justify-between text-sm">
          <span>句式多样性指数</span>
          <span class="text-primary">0.82</span>
        </div>
      </div>
    </div>
    <div class="bg-white rounded-lg p-6 shadow-sm">
      <h3 class="text-lg font-medium mb-4">结构分析</h3>
      <div id="structureChart" class="w-full h-64"></div>
      <div class="mt-4 space-y-2">
        <div class="flex justify-between text-sm">
          <span>段落数</span>
          <span class="text-primary">5 段</span>
        </div>
        <div class="flex justify-between text-sm">
          <span>中心句完整度</span>
          <span class="text-primary">92%</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-white rounded-lg p-6 shadow-sm">
    <h3 class="text-lg font-medium mb-4">写作建议</h3>
    <div class="space-y-4">
      <div class="flex items-start space-x-4">
        <i class="fas fa-lightbulb text-yellow-500 mt-1"></i>
        <div>
          <h4 class="font-medium">加强论证深度</h4>
          <p class="text-gray-600 text-sm mt-1">建议在论证过程中增加具体案例支撑，使文章更有说服力。可以适当增加数据论据的使用频率。</p>
        </div>
      </div>
      <div class="flex items-start space-x-4">
        <i class="fas fa-chart-line text-primary mt-1"></i>
        <div>
          <h4 class="font-medium">优化段落结构</h4>
          <p class="text-gray-600 text-sm mt-1">各段落之间的过渡较为生硬，建议增加过渡句，使文章结构更加流畅自然。</p>
        </div>
      </div>
      <div class="flex items-start space-x-4">
        <i class="fas fa-magic text-purple-500 mt-1"></i>
        <div>
          <h4 class="font-medium">丰富表达方式</h4>
          <p class="text-gray-600 text-sm mt-1">可以适当增加修辞手法的运用，如比喻、排比等，使语言更加生动形象。</p>
        </div>
      </div>
    </div>
  </div>
</div>

      <div id="user-modal" class="modal">
        <div class="modal-content user-modal-content">
            <span class="close-button">&times;</span>
            <div class="user-profile-header">
                <div class="user-avatar">
                    <img src="images/avatar.svg" alt="用户头像">
                </div>
                <h2 id="modal-username"></h2>
            </div>
            <div class="user-details">
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="detail-info">
                        <label>邮箱</label>
                        <span id="modal-email"></span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <div class="detail-info">
                        <label>用户ID</label>
                        <span id="modal-userid"></span>
                    </div>
                </div>
            </div>
            <div class="logout-section">
                <button class="logout-btn" onclick="handleLogout()">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </button>
            </div>
        </div>
    </div>
<!--作文对比分析弹窗-->
<!-- 作文对比分析弹窗 -->
<div id="score-detail-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50 p-4">
  <div class="bg-white rounded-xl w-full max-w-5xl mx-4 overflow-hidden h-[85vh] flex flex-col shadow-2xl">
    <!-- 弹窗头部 -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-500 px-6 py-4 flex justify-between items-center sticky top-0 z-10">
      <div>
        <h3 class="text-xl font-semibold text-white flex items-center">
          <i class="fas fa-chart-line mr-2"></i>
          作文对比分析报告
        </h3>
        <p class="text-blue-100 text-sm mt-1" id="essay-meta">
          <span>作文ID: 加载中...</span> |

        </p>
      </div>
      <button id="close-modal" class="text-white hover:text-blue-200 transition-colors text-2xl">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <!-- 弹窗内容（可滚动区域） -->
    <div class="flex-1 overflow-auto">
      <div class="p-6 space-y-8">
        <!-- 1. 总分对比卡片 -->
        <div class="bg-gray-50 rounded-lg p-6 border border-gray-200" id="total-score-section">
          <h3 class="text-lg font-semibold mb-4 text-gray-700">总分对比</h3>
          <div class="flex items-center justify-center space-x-8" id="total-score-comparison">
            <!-- 动态内容将通过JS渲染 -->
          </div>
        </div>

        <!-- 2. 四维度对比卡片 -->
        <div>
          <h3 class="text-lg font-semibold mb-4 text-gray-700">维度分析</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="dimension-cards">
            <!-- 动态内容将通过JS渲染 -->
          </div>
        </div>

        <!-- 3. 雷达图 -->
        <div class="bg-white border border-gray-200 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-4 text-gray-700">能力维度对比</h3>
          <div class="h-64">
            <canvas id="radar-chart"></canvas>
          </div>
        </div>

        <!-- 4. 改进建议 -->
        <div>
          <h3 class="text-lg font-semibold mb-4 text-gray-700">改进建议</h3>
          <div class="space-y-3" id="improvement-suggestions">
            <!-- 动态内容将通过JS渲染 -->
          </div>
        </div>
      </div>
    </div>


  </div>
</div>


  </div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
            // 获取模态窗口元素
            var contactModal = document.getElementById("contact-modal");
            var userModal = document.getElementById("user-modal");
            var contactLink = document.getElementById("contact-link");

            // 获取关闭按钮
            var contactCloseButton = document.querySelector("#contact-modal .close-button");
            var userCloseButton = document.querySelector("#user-modal .close-button");

            // 确保元素存在
            if (contactLink) {
                // 点击"联系方式"链接时显示模态窗口
                contactLink.addEventListener('click', function(event) {
                    event.preventDefault();
                    contactModal.style.display = "block";
                    console.log("联系方式模态窗口已打开");
                });
            }

            // 确保关闭按钮存在并添加事件监听器
            if (contactCloseButton) {
                contactCloseButton.addEventListener('click', function() {
                    contactModal.style.display = "none";
                    console.log("联系方式模态窗口已关闭");
                });
            }

            if (userCloseButton) {
                userCloseButton.addEventListener('click', function() {
                    userModal.style.display = "none";
                    console.log("用户模态窗口已关闭");
                });
            }

            // 点击模态窗口外部时隐藏模态窗口
            window.addEventListener('click', function(event) {
                if (event.target == contactModal) {
                    contactModal.style.display = "none";
                    console.log("点击外部关闭联系方式模态窗口");
                }
                if (event.target == userModal) {
                    userModal.style.display = "none";
                    console.log("点击外部关闭用户模态窗口");
                }
            });

            // 用户信息相关代码
            const userInfo = localStorage.getItem('user');
            const userInfoDiv = document.querySelector('.user-info');
            const authButtons = document.querySelector('.auth-buttons');
            const usernameDisplay = document.getElementById('username-display');
            console.log(userInfo);
            if (userInfo) {
                const user = JSON.parse(userInfo);
                userInfoDiv.style.display = 'block';
                authButtons.style.display = 'none';
                usernameDisplay.textContent = user.username;

                // 点击用户名显示模态窗口
                usernameDisplay.addEventListener('click', function() {
                    const user = JSON.parse(localStorage.getItem('user'));
                    document.getElementById("modal-username").textContent = user.username;
                    document.getElementById("modal-email").textContent = user.email;
                    document.getElementById("modal-userid").textContent = user.id;
                    userModal.style.display = "block";
                    console.log("用户模态窗口已打开");
                });
            } else {
                userInfoDiv.style.display = 'none';
                authButtons.style.display = 'block';
            }
        });

        // 退出登录处理函数
        function handleLogout() {
            // 清除本地存储的用户信息和token
            localStorage.removeItem('token');
            localStorage.removeItem('user');

            // 关闭模态窗口
            const modal = document.getElementById('user-modal');
            modal.style.display = 'none';

            // 显示成功消息
            showMessage('已成功退出登录');

            // 更新界面显示
            const userInfoDiv = document.querySelector('.user-info');
            const authButtons = document.querySelector('.auth-buttons');

            // 隐藏用户信息，显示登录注册按钮
            userInfoDiv.style.display = 'none';
            authButtons.style.display = 'block';

            // 保持在当前页面（首页）
            window.location.href = 'index.html';
        }

        // 消息提示函数
        function showMessage(message) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-toast';
            messageDiv.textContent = message;
            document.body.appendChild(messageDiv);

            // 添加显示类名以触发动画
            setTimeout(() => messageDiv.classList.add('show'), 10);

            // 3秒后移除消息
            setTimeout(() => {
                messageDiv.classList.remove('show');
                setTimeout(() => messageDiv.remove(), 300);
            }, 3000);
        };

window.onload = function() {
  // 分数趋势图
  const scoreChart = echarts.init(document.getElementById('scoreChart'));
  scoreChart.setOption({
    animation: false,
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value',
      min: 60
    },
    series: [{
      data: [75, 78, 82, 85, 89, 92],
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#3B82F6'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(59,130,246,0.2)'
          }, {
            offset: 1,
            color: 'rgba(59,130,246,0)'
          }]
        }
      }
    }]
  });



  // 词汇分析图
  const vocabularyChart = echarts.init(document.getElementById('vocabularyChart'));
  vocabularyChart.setOption({
    animation: false,
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 35, name: '基础词汇' },
        { value: 42, name: '常用词汇' },
        { value: 23, name: '高级词汇' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });

  // 句式分析图
  const sentenceChart = echarts.init(document.getElementById('sentenceChart'));
  sentenceChart.setOption({
    animation: false,
    xAxis: {
      type: 'category',
      data: ['简单句', '并列句', '复合句', '转折句']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [30, 25, 35, 10],
      type: 'bar',
      itemStyle: {
        color: '#3B82F6'
      }
    }]
  });

  // 结构分析图
  const structureChart = echarts.init(document.getElementById('structureChart'));
  structureChart.setOption({
    animation: false,
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 20, name: '开头段' },
        { value: 25, name: '过渡段' },
        { value: 35, name: '主体段' },
        { value: 20, name: '结尾段' }
      ]
    }]
  });
};
  // 更新图表配置，添加动画和交互效果
const chartConfig = {
    scoreChart: {
        // ... 原有配置
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        // 添加渐变色
        series: [{
            data: [75, 78, 82, 85, 89, 92],
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 4,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#3B82F6'
                    }, {
                        offset: 1,
                        color: '#60A5FA'
                    }]
                }
            },
            // ... 其他配置
        }]
    },
    // 其他图表类似配置
};


</script>
</body>
</html>

```

